<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流例程</title>
    <style>
        .round{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        #tips {
            font-size: 12px;
            position: fixed;
            right: 20%;
            top: 0;
        }
        #tips>p{
            margin-bottom: 4px;
        }
    </style>
</head>
<body>

    <h5>案例一</h5>
    <div class="round"></div>
    <div id="tips"></div>
    
    <br><br>
    <button id="btn1" type="button">点击让上面的盒子更圆吧</button>

    <script src="throttle.js"></script>
    <script>
        var throttle = new Throttle({
            factor: 1000
        })
        var round = document.querySelector('.round')
        var tips = document.querySelector('#tips')
        var radius = 0;
        document.querySelector('#btn1').addEventListener('click', function() {
            throttle.touch(function() {
                radius += 5;
                round.style.borderRadius = radius + 'px'
                console.log('操作成功')
            }, function() {
                var p = document.createElement('p')
                p.innerHTML = '操作太频繁啦'
                tips.appendChild(p)
            })
        }, false)

    </script>
    
</body>
</html>